import React from 'react';
import classNames from 'classnames';
import dayjs from 'dayjs';
import _ from 'lodash';

import './Comments.css'; // 导入样式
import avatar from './images/avatar.jpeg'; // 导入图片

export class Comments extends React.Component {
  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    active: 'hot',
    list: [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: new Date('2021-10-10 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '哎哟，不错哦',
        time: new Date('2021-10-11 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0,
      },
      {
        id: 3,
        author: '五月天',
        comment: '不打扰，是我的温柔',
        time: new Date('2021-10-11 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
      },
    ],
    // 用户输入的评论
    txt: '',
  };

  // 创建 txt DOM 容器
  txtRef = React.createRef();

  // 评论输入事件处理函数
  handleTxt = (e) => {
    // console.log(e);
    // console.log({ ...e });
    // console.log(e.currentTarget);
    // 设置用户输入状态
    this.setState({
      txt: e.target.value,
    });
  };

  // 发表评论事件处理函数
  handleAddComment = () => {
    // 评论内容是否为空判断
    if (this.state.txt.trim().length === 0) {
      // 产品经理决定
      return this.txtRef.current.focus();
      // return alert('评论内容不能为空');
    }

    console.log('准备发表评论了', this.state.txt);

    // 1 组合一个评论对象
    const comment = {
      id: Date.now(), // Math.random()
      author: '江程程',
      comment: this.state.txt,
      time: new Date(),
      attitude: 0,
    };
    // 给数组添加一个新元素
    this.setState({
      list: [comment, ...this.state.list],
      // list: [...this.state.list, comment],
      txt: '', // 清空评论区
    });

    // 发表评论完毕以后，设置光标到评论输入框
    this.txtRef.current.focus();
  };

  // 删除按钮事件处理
  delComment = (id) => {
    console.log(id);
    // 使用数组的 filter 方法
    const filtered = this.state.list.filter((item) => item.id !== id);
    // 过滤后的数组设置到页面状态中去
    this.setState({
      list: filtered,
    });
  };
  // 点赞或点踩
  changeAttitude = (id, newAttitude) => {
    console.log(id, newAttitude);

    // 使用 forEach 实现
    // let newList = [];
    // this.state.list.forEach((item) => {
    //   if (item.id === id) {
    //     newList.push({ ...item, attitude: newAttitude });
    //   } else {
    //     newList.push(item);
    //   }
    // });

    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        // 点赞或点踩新的数据
        return {
          ...item,
          attitude: newAttitude,
        };
        // console.log('前', item);
        // item.attitude = newAttitude;
        // console.log('后', item);
        // return item;
      } else {
        return item;
      }
    });
    // 触发页面更新
    this.setState({
      list: newList,
    });
  };
  // 改变排序
  changeSortType = (type) => {
    console.log(type);
    // 排序-id 降序
    if (type === 'hot') {
      // 热度按照id降序排列
      const newList = [
        ...this.state.list.sort((a, b) => {
          // a - b是升， b - a 是降
          return b.id - a.id;
        }),
      ];
      // 排序选中状态
      this.setState({
        list: newList,
        active: type,
      });
    } else {
      // 时间戳的升序
      // const newList = [
      //   ...this.state.list.sort((a, b) => {
      //     // a - b是升， b - a 是降
      //     // 时间生序
      //     return a.time.getTime() - b.time.getTime();
      //     // 时间降序
      //     // return b.time.getTime() - a.time.getTime();
      //   }),
      // ];
      // 使用第三方库
      const newList = _.orderBy(this.state.list, ['time'], ['asc']);
      // 排序选中状态
      this.setState({
        list: newList,
        active: type,
      });
    }
  };

  render() {
    console.log('txt:', this.state.txt);
    return (
      <div className="comment-root">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-number">
            <span>{this.state.list.length} 评论</span>
          </div>

          {/* 排序tab */}
          <div className="tabs-order">
            {/* 类on选中效果 */}
            {this.state.tabs.map((item) => (
              <div
                key={item.id}
                onClick={() => this.changeSortType(item.type)}
                className={classNames({ on: this.state.active === item.type })}
                // className={this.state.active === item.type ? 'on' : ''}
              >
                按{item.name}排序
              </div>
            ))}
          </div>

          {/* 发表评论区 */}
          <div className="comment-send-container">
            <div>
              <img className="user-head" src={avatar} alt="头像" />
            </div>
            <div className="comment-send">
              <div className="textarea-container">
                <textarea
                  cols="80"
                  rows="5"
                  ref={this.txtRef}
                  value={this.state.txt}
                  onChange={this.handleTxt}
                  placeholder="发条友善的评论"
                  className="ipt-txt"
                />
                <button
                  className="comment-submit"
                  onClick={this.handleAddComment}
                >
                  发表评论
                </button>
              </div>
              <div className="comment-emoji">
                <i className="face"></i>
                <span className="text">表情</span>
              </div>
            </div>
          </div>

          {/* 评论列表区 */}
          <div className="comment-list">
            {this.state.list.map((item) => (
              <div key={item.id} className="comment-item">
                <div>
                  <img className="user-head" src={avatar} alt="头像" />
                </div>

                <div className="comment">
                  {/* 评论人 */}
                  <div className="user">{item.author}</div>
                  {/* 评论内容 */}
                  <p className="text">{item.comment}</p>
                  <div className="info">
                    <span className="time">
                      {dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')}
                    </span>
                    <span
                      // className={item.attitude === 1 ? 'like liked' : 'like'}
                      className={`like ${item.attitude === 1 ? 'liked' : ''}`}
                      onClick={() =>
                        this.changeAttitude(
                          item.id,
                          item.attitude === 1 ? 0 : 1
                        )
                      }
                    >
                      <i className="icon" />
                    </span>
                    <span
                      className={item.attitude === -1 ? 'hate hated' : 'hate'}
                      onClick={() =>
                        this.changeAttitude(
                          item.id,
                          item.attitude === -1 ? 0 : -1
                        )
                      }
                    >
                      <i className="icon" />
                    </span>
                    <span
                      className="btn-hover"
                      onClick={() => this.delComment(item.id)}
                    >
                      删除
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}
